<template>
  <view>
    <image class="base-img" :src="reviewBaseImg" mode="widthFix"></image>
    <tn-button id="print_btn" @click="cusRenderDom" class="btn">打印</tn-button>

    <sp-html2pdf-render
        domId="render-dom"
        ref="renderRef"
        @renderOver="renderOver"
        :auto-open="false"
    ></sp-html2pdf-render>


    <div id="render-dom">
      <view class="main">
        <view class="title">
          <view>赔偿说明</view>
        </view>
        <view class="content">
          <view class="tn-flex" style="padding-left: 2em;">
            <view class="unline" style="width: 60px;">{{ jsonData.happenYear }}</view>
            年
            <view class="unline" style="width: 60px;">{{ jsonData.happenMonth }}</view>
            月
            <view class="unline" style="width: 60px;">{{ jsonData.happenDay }}</view>
            日,
            <view class="unline" style="width: 120px;">{{ jsonData.clientName }}</view>
            驾驶
            <view class="unline tn-flex-1">{{ jsonData.carNo }}</view>
            车辆,
          </view>

          <view class="tn-flex">
            在
            <view class="unline tn-flex-1">{{ jsonData.location }}</view>
            处，由于发
          </view>

          <view class="tn-flex">
            生交通事故，造成路产损失如下：
          </view>

          <view class="tn-text-left">
            <view v-for="text in content" :key="text" class="unline" style="width: 100%;margin-top: 20px;">{{ text }}
            </view>
          </view>


          <view class="tn-flex" style="padding-left: 2em;margin-top: 20px;">
            根据
            <view class="unline tn-flex-1">{{ jsonData.accordTo }}</view>
            赔（补）偿标
          </view>

          <view class="tn-flex">
            准计算，我自愿交纳路产赔（补）偿费人民币
            <view class="unline " style="padding: 0 30px;">{{ jsonData.payMoneyUppercase }}</view>
            （￥
            <view class="unline " style="padding: 0 20px;">{{ jsonData.payMoney }}</view>
            元）。
          </view>


        </view>

        <view style="margin-top: 50px;font-size: 18px;" class="tn-flex tn-flex-row-between">
          <view class="tn-flex">
            <view style="line-height: 45px;">交款人：</view>
            <view class="unline tn-text-center" style="width: 220px;">
              <img v-if="jsonData.tzLocat" style="width: 130px;height: 39px;" :src="jsonData.tzLocat"/>
            </view>
          </view>
          <view class="tn-flex">
            <view style="line-height: 45px;">日 期：</view>
            <view class="unline tn-text-center" style="width: 220px;">
              <img v-if="jsonData.time" style="width: 130px;height: 39px;" :src="jsonData.time"/>
            </view>
<!--            <view class="unline" style="width: 60px;">{{ jsonData.happenYear }}</view>-->
<!--            年-->
<!--            <view class="unline" style="width: 60px;">{{ jsonData.happenMonth }}</view>-->
<!--            月-->
<!--            <view class="unline" style="width: 60px;">{{ jsonData.happenDay }}</view>-->
<!--            日-->
          </view>
        </view>

        <view style="margin-top: 50px;font-size: 18px;line-height: 40px;">
          <view>
            经办单位：（盖章）
          </view>
          <view>
            注：本文书一式两份：一份存根，一份交当事人或者代理人。

          </view>
        </view>

      </view>
    </div>
  </view>
</template>

<script>
import {base64ToPath} from "@/uni_modules/sp-html2pdf-render/utils";
import {addDocPhoto, delDocPhoto, uploadLp, uploadLpPdf} from "@/api/lupeiwenshu";
import {base64ToFile} from "@/utils/typeConversion";
import {splitStringByMaxLength} from "@/pages/roadCompensation/tanhuajilu/formatData";

export default {
  props: ['jsonData'],
  data() {
    return {
      noCodeImg: true,

      reviewBaseImg: '',
      webImageBase: '',
      locImageBase: ''
    };
  },
  computed: {
    content() {
      return splitStringByMaxLength(this.jsonData.goodsDamage, 43)
    }
  },
  methods: {
    cusRenderDom() {
      this.noCodeImg = false
      this.$refs.renderRef.h2pRenderDom()
    },
    cusRenderDomNoCodeImg() {
      this.noCodeImg = true
      this.$refs.renderRef.h2pRenderDom()
    },
    renderOver(e) {
      // e为导出的图片（base64）
      // console.log('e', e);
      const file = base64ToFile(e, 'fjtp', 'png');
      console.log(file)
      base64ToPath(e).then(path => {
        // this.$emit('upload', {
        //   ...{
        //     code: 0,
        //     data: {
        //       url: 'http://47.92.235.205/lppdf/2025/08/13/1955435227065749506.pdf'
        //     }
        //   },
        //   path
        // })
        // return
        delDocPhoto({
          "id": this.$root.$route.query.id,
          "type": 4,
        }).then(res => {
          console.log('res', res)
          uploadLp({
            filePath: e
          }).then(res => {
            addDocPhoto({
              "fileUrl": res.data.url,
              "typeNum": 4,
              "typeName": "赔偿说明",
              "docId": this.$root.$route.query.id,
            }).then(result => {
              this.$emit('upload', {...res, path, noCodeImg: this.noCodeImg})
            })
          }).catch(err => {
            console.log('err', err)
            this.$emit('upload', {code: 500})
          })
        })

      })
    },
    beforeSavePDF(e) {
      // e为导出的pdf（base64）
      // console.log('==== beforeSavePDF :', e);
      return
      const file = base64ToFile(e, 'jzjp021212.pdf', 'pdf');
      base64ToPath(e).then(path => {

        // this.$emit('upload', {
        //   ...{
        //     code: 0,
        //     data: {
        //       url: 'http://47.92.235.205/lppdf/2025/08/13/1955435227065749506.pdf'
        //     }
        //   },
        //   path
        // })
        // return

        uploadLpPdf({
          file,
        }).then(res => {
          this.$emit('upload', {...res, path})
        }).catch(err => {
          console.log('err', err)
          this.$emit('upload', {code: 500})
        })
      })

    },
  }
};
</script>


<style scoped lang="scss">

#render-dom {
  width: 794px;
  height: 1123px;
  padding: 0px 77px 0;
  color: #000;
  .main {
    margin: 0 auto;
    font-family: "宋体";
  }

  .title {
    line-height: 140px;
    font-weight: bold;
    text-align: center;
    font-size: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;

  }

  .content {
    font-size: 18px;
    text-align: center;


    & > view {
      padding: 10px 0;
    }
  }

  .unline {
    border-bottom: 1px solid #000;
  }

}

</style>
